<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <title>IT服务</title>
  <link rel="shortcut icon" href="favicon.jpg"/>
  <link rel="stylesheet" href="3rd/element-ui@2.13.2/lib/theme-chalk/index.css"/>
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/reset.css"/>
  <style>

    .bottom{
      position:fixed;
      bottom:10px;
      /*margin-left: 40%;*/
      left: 50px;

      /*width: 1010px;*/

    }
    .el-tab-pane {
      height: calc(100vh - 160px);
      overflow-y: auto;
    }
    .el-row {
      margin-bottom: 20px;
    &:last-child {
       margin-bottom: 0;
     }
    }
    .num{
      color: red;
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <el-container>
    <el-main>
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
          <el-tab-pane name="first">
            <span slot="label">
              全部工单
            </span>

            <el-input v-model="user" placeholder="" style="width: 300px; position:fixed; background-color: #ffffff"></el-input>
            <el-button type="primary" style="position:fixed; left: 350px; " @click="query">搜索</el-button>
            <br/>
            <br/>
            <div class="num">
              <el-card v-for="item in respaAll" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOverRate(item.processNo)">
                <div slot="header" class="clearfix">
                  <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                  问题类型：{{item.subject}}
                  <span style=" float: right; padding: 3px 0">
                    <p v-if="item.state==1&&item.isAccepted==0">待受理</p>
                    <p v-else-if="item.state==1&&item.isAccepted==1">待完成</p>
                    <p v-else-if="item.state==2&&item.isAccepted==1&&item.score">已评价</p>
                    <p v-else-if="item.state==2&&item.isAccepted==1">待评价</p>
                  </span>
                </div>
                <div class="detail">
                  <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                  申请人：{{ item.createName }}
                  <br/><br/>
                  <p class="el-icon-tickets" style="color: #44fd37"></p>
                  内容：{{ item.content }}
                  <br/>
                  <br/>
                  <div v-if="!item.score">
                  </div>
                  <div v-else>
                    <el-rate v-model="item.score" disabled></el-rate>
                  </div>
                </div>
              </el-card>
            </div>

          </el-tab-pane>
          <el-tab-pane label="待受理" name="second">
            <div class="num">
              <el-card v-for="item in respaPro1" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOverRate(item.processNo)">
                <div slot="header" class="clearfix">
                  <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                  问题类型：{{item.subject}}
                </div>
                <div class="detail">
                  <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                  申请人：{{ item.createName }}
                  <br/><br/>
                  <p class="el-icon-tickets" style="color: #44fd37"></p>
                  内容：{{ item.content }}
<!--                  <br/>-->
<!--                  <br/>-->
<!--                  <el-rate v-model="item.score" disabled></el-rate>-->
                </div>
              </el-card>
            </div>

          </el-tab-pane>
          <el-tab-pane label="待完成" name="third">
            <div class="num">
              <el-card v-for="item in respaPro2" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOverRate(item.processNo)">
                <div slot="header" class="clearfix">
                  <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                  问题类型：{{item.subject}}
                </div>
                <div class="detail">
                  <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                  申请人：{{ item.createName }}
                  <br/><br/>
                  <p class="el-icon-tickets" style="color: #44fd37"></p>
                  内容：{{ item.content }}
<!--                  <br/>-->
<!--                  <br/>-->
<!--                  <el-rate v-model="item.score" disabled></el-rate>-->
                </div>
              </el-card>
            </div>

          </el-tab-pane>
          <el-tab-pane label="已完成" name="fourth">
            <div class="num">
              <el-card v-for="item in respaPro3" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOverRate(item.processNo)">
                <div slot="header" class="clearfix">
                  <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                  问题类型：{{item.subject}}
                </div>
                <div class="detail">
                  <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                  申请人：{{ item.createName }}
                  <br/><br/>
                  <p class="el-icon-tickets" style="color: #44fd37"></p>
                  内容：{{ item.content }}
                  <br/>
                  <br/>
                  <div v-if="!item.score">
                  </div>
                  <div v-else>
                    <el-rate v-model="item.score" disabled></el-rate>
                  </div>
                </div>
              </el-card>
            </div>

          </el-tab-pane>
          <el-tab-pane label="待评价" name="fifth">
            <div class="num">
              <el-card v-for="item in respaPro4" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOverRate(item.processNo)">
                <div slot="header" class="clearfix">
                  <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                  问题类型：{{item.subject}}
                </div>
                <div class="detail">
                  <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                  申请人：{{ item.createName }}
                  <br/><br/>
                  <p class="el-icon-tickets" style="color: #44fd37"></p>
                  内容：{{ item.content }}
<!--                  <br/>-->
<!--                  <br/>-->
<!--                  <el-rate v-model="item.score" disabled></el-rate>-->
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已评价" name="sixth">
            <div class="num">
              <el-card v-for="item in respaPro5" :key="item.processNo" :body-style="{ display: 'flex', padding: 2 }" @click.native="toOverRate(item.processNo)">
                <div slot="header" class="clearfix">
                  <span class="el-icon-warning-outline" style="color: #ff4d51"></span>
                  问题类型：{{item.subject}}

                </div>
                <div class="detail">
                  <p class="el-icon-s-custom" style="color: #b3e19d"></p>
                  申请人：{{ item.createName }}
                  <br/><br/>
                  <p class="el-icon-tickets" style="color: #44fd37"></p>
                  内容：{{ item.content }}
                  <br/>
                  <br/>
                  <el-rate v-model="item.score" disabled></el-rate>
                </div>

              </el-card>

            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-main>
    <el-footer>

    </el-footer>
  </el-container>
  <div class="bottom">
    <el-button type="primary" @click="toIndex">主页</el-button>
  </div>



</div>
<script src="3rd/polyfill.min.js"></script>
<script src="3rd/vue.min.js"></script>
<script src="3rd/element-ui@2.13.2/lib/index.js"></script>
<script src="3rd/axios.min.js"></script>
<script src="js/util.js"></script>
<script src="js/enProcess.js"></script>
</body>
</html>
